body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.app-header {
    height: 64px;
    line-height: 48px;
    box-sizing: border-box;
    padding: 8px 16px;
    border: solid 2px ghostwhite;
}
.app-header h2 {
    display: inline;
    margin: 0;
    margin-left: 64px;
    vertical-align: top;
}
.app-header img {
    height: 48px;
    margin-left: 16px;
}

#content {
    background-color: #fcf9f2;
    height: calc(100% - 64px);
    position: relative;
}
#map-container {
    margin-left: 300px;
    height: 100%;
}
#map-container.no-sidebar {
    margin-left: 0;
}
#sidebar {
    border-right: 2px solid ghostwhite;
    background: white;
    width: 300px;
    top: 64px;
    bottom: 0;
    box-sizing: border-box;
    padding-top: 40px;
    top: 0;
    position: absolute;
    transition: transform 200ms ease;
}
.sidebar-content {
    height: 100%;
    overflow: auto;
}
.icon-toggle-sidebar {
    border-radius: 50%;
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 8px;
    width: 24px;
    cursor: pointer;
}
#sidebar.hidden {
    transform: translateX(-300px);
}
#sidebar.hidden *:not(.icon-toggle-sidebar) {
    display: none;
}
#sidebar.hidden .icon-toggle-sidebar {
    right: -48px;
}
.icon-toggle-sidebar:hover,
#sidebar.hidden .icon-toggle-sidebar {
    background-color: ghostwhite;
}
#sidebar.flying .icon-toggle-sidebar {
    right: 8px;
}

.station-info-block {
    position: absolute;
}
.content-window-card .station-picture {
    width: 300px;
}

.sidebar-title {
    margin: 16px;
}
.buffer-list {
    list-style: none;
    padding-left: 16px;
}
.legend {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin: 0 2px;
}
#xz-road-buffer+.legend {
    background-color: #beb297;
}
#xz-pond-buffer+.legend {
    background-color: #becf50;
}
#xz-river-buffer+.legend {
    background-color: lightblue;
}
#xz-residential-buffer+.legend {
    background-color: pink;
}
#xz-bad-area+.legend {
    background-color: grey;
}
#xz-pre-result+.legend {
    background-color: greenyellow;
}
#xz-result+.legend {
    background-color: lightgreen;
}

.xz-button-group {
    padding-left: 16px;
    margin-bottom: 16px;
}
.xz-description-container {
    height: 264px;
    overflow: hidden;
    position: relative;
}
#xz-description-container.animated {
    position: absolute;
    animation: fly-in 1s ease 0s 1;
}
#xz-description-container p {
    margin: 16px;
    margin-top: 8px;
    text-indent: 2em;
}

@keyframes fly-in {
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: none;
    }
}